<template>
  <div class="body-bg">
    <!-- 头部 -->
    <header-module :title="'服务区安全态势感知'" originName="securitySituation"></header-module>
    <div class="content">
      <!-- 左边 -->
      <div class="content_info">
        <!-- 综合 -->
        <div class="yz-select-server">
          <div class="yz-box-items">
            <div class="yz-box-item" v-for="(item,index) in abItems" @click="abClick(index)">
              <div v-if="item.selected" class="yz-box-item-text yx-box-item-selected" style="width:5vh;">{{item.name}}</div>
              <div v-else class="yz-box-item-text" style="width:5vh;">{{item.name}}</div>
            </div>
          </div>
        </div>

        <div class="content_info_item">
          <contentTitle :title="'事件年度对比'"/>
          <div class="body-box-bg">
            <div class="yz-common-small-title">
              <div class="yz-common-title-navs" style="justify-content: flex-end;width: 50vh;">
                <div :class="['yz-common-title-nav',{'selected':item.selected}]" data-level="2" v-for="(item,index) in sjnddb_navs" @click="sjnddbClick(index)">
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </div>
            <div ref="sjnddbRef" class="chart"></div>
          </div>
        </div>
        <div class="content_info_item" style="z-index: 2;">
          <contentTitle :title="'今日检测预警记录'"/>
          <div class="body-box-bg">
            <table class="filler-table filler-table2">
              <thead>
              <tr>
                <th>相机位置(车牌)</th>
                <th style="width:20%">事件类型</th>
                <th><div class="time">发生时间</div></th>
                <th style="width:6%">照片</th>
                <th style="width:6%">回放</th>
                <th style="width:6%">广播</th>
              </tr>
              </thead>
            </table>
            <el-carousel height="200px" direction="vertical" :autoplay="true" style="width: 100%" indicator-position="none" interval="4000">
              <el-carousel-item v-for="(items,index) in jcyjjlGroupTable">
                <table class="filler-table filler-table2">
                  <tbody>
                  <tr v-for="(item,child) in items">
                    <td>{{item.express.substring(0,15)}}</td>
                    <td  style="width:20%">{{item.eventtypename}}</td>
                    <td><div class="time">{{item.validdatetime}}</div></td>
                    <td style="width:6%"><div class="tc" @click="viewImg(item)"><div class="pic"></div></div></td>
                    <td style="width:6%"><div class="tc" @click="playback(item)" v-if="item.channelid!=null"><div class="camera"></div></div></td>
                    <td style="width:6%"><div class="tc" @click="seeAbroadcast(item)"><div class="broadcast"></div></div></td>
                  </tr>
                  </tbody>
                </table>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="content_info_item" style="z-index: 2;">
          <contentTitle :title="'今日危化品车辆进出记录'"/>
          <div class="body-box-bg">
            <div class="yz-box-items" style="height: 3.2vh;">
          </div>
            <table class="filler-table">
              <thead>
              <tr>
                <th>分区</th>
                <th>车牌号</th>
                <th>位置</th>
                <th><div class="time">经过时间</div></th>
              </tr>
              </thead>
            </table>
            <el-carousel height="200px" direction="vertical" :autoplay="true" style="width: 100%" indicator-position="none" interval="4000">
              <el-carousel-item v-for="(items,index) in whpcljcjlGroupTable">
                <table class="filler-table">
                  <tbody>
                  <tr v-for="(item,child) in items" @click="viewImg(item)">
                    <td>{{item.area}}</td>
                    <td>{{item.carNo}}</td>
                    <td>{{item.position}}</td>
                    <td><div class="time">{{item.time}}</div></td>
                  </tr>
                  </tbody>
                </table>
                </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="content_map">
        <div class="yz-map-header">
          <div class="car_flow blueNum">
            <div class="car_flow_text">今日危化品车流量</div>
            <div class="car_flow_num">
              <div class="perNum" v-for="(item,index) in carFlowOptions.carFlowNum">
                <!-- 有背景图，然后把数字拆分  -->
                <countTo :startVal='0' :endVal='parseInt(item)||0' :duration='5000'></countTo>
              </div>
            </div>
            <div class="car_flow_unit">辆</div>
          </div>
        </div>
        <div class="svg-content">

        </div>
      </div>
      <!-- 右边 -->
      <div class="content_info">
        <!-- 综合 -->
        <div class="yz-box2-items" style="justify-content:flex-end">
          <div class="yz-box2-item" style="width: 30%">
            <div class="yz-box2-p">{{state.pjtlsj}}分钟</div>
            <div class="yz-box2-p center">危化品车停留时间</div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'危化品监控点'"/>
          <div class="body-box-bg">
            <div class="yx-xs-6">
              <div class="video-box-dd" style="padding: 1vh">
                <el-image :src="state.video_img_a_1" alt="" @click="seeVideo(state.video_a_1,'危化品监控点')"></el-image>
                <div class="p">{{abItems[1].name}}</div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="video-box-dd" style="padding: 1vh">
                <el-image :src="state.video_img_a_2" alt="" @click="seeVideo(state.video_a_2,'危化品监控点')"></el-image>
                <div class="p">{{abItems[2].name}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'充电桩监控点'"/>
          <div class="body-box-bg">
            <div class="yx-xs-6">
              <div class="video-box-dd" style="padding: 1vh">
                <el-image :src="state.video_img_b_1" alt="" @click="seeVideo(state.video_b_1,'充电桩监控点')"></el-image>
                <div class="p">{{abItems[1].name}}</div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="video-box-dd" style="padding: 1vh">
                <el-image :src="state.video_img_b_2" alt="" @click="seeVideo(state.video_b_2,'充电桩监控点')"></el-image>
                <div class="p">{{abItems[2].name}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_info_item">
          <contentTitle :title="'加油站监控点'"/>
          <div class="body-box-bg">
            <div class="yx-xs-6">
              <div class="video-box-dd" style="padding: 1vh">
                <el-image :src="state.video_img_c_1" alt="" @click="seeVideo(state.video_c_1,'加油站监控点')"></el-image>
                <div class="p">{{abItems[1].name}}</div>
              </div>
            </div>
            <div class="yx-xs-6">
              <div class="video-box-dd" style="padding: 1vh">
                <el-image :src="state.video_img_c_2" alt="" @click="seeVideo(state.video_c_2,'加油站监控点')"></el-image>
                <div class="p">{{abItems[2].name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部菜单 -->
  <fwq-bottom-menu></fwq-bottom-menu>
  <!-- 图片弹出 -->
  <photo-layer v-if="showPhotoLayer" @closePhotoLayer="closePhotoLayer" :imgItems="imgItems"></photo-layer>
  <broadcast-layer v-if="showBroadcastLayer" @closeBroadcastLayer="closeBroadcastLayer"></broadcast-layer>
  <video-player ref="vPlayerRef" :video-source="videoSource" :video-title="videoTitle" @closeVideo="closeVideo" v-if="showVideoLayer" style="z-index:1001"></video-player>
  <yjjl-layer :yjjl-source="yjjlSource" @closeYjjlLayer="closeYjjlLayer" @seeVideo="seeVideo" @seeAbroadcast="seeAbroadcast" style="z-index:1" v-if="showYjjlLayer"></yjjl-layer>
</template>
<script setup>
import {getCurrentInstance, onMounted, ref,watch,onUnmounted,reactive} from "vue";
import './../assets/content.css'
import 'dayjs/locale/zh-cn';
import HeaderModule from "./components/headerModule.vue";
import {CountTo} from "vue3-count-to";
import {drawLine} from "../util/chartUtil.js";
import FwqBottomMenu from "./components/fwqBottomMenu.vue";
import {ajaxRequest} from "../api/code.js";
import ContentTitle from "./components/contentTitle.vue";
import PhotoLayer from "./components/photoLayer.vue";
import VideoPlayer from "./components/videoPlayer2.vue";
import BroadcastLayer from "./components/broadcastLayer.vue";
import YjjlLayer from "./components/securitySituation/yjjlLayer.vue";
const chart = getCurrentInstance().proxy.$echarts





//ab选择
const abItems = ref([{
  name:"综合",
  selected: true
},{
  name:"东(南)",
  selected: false
},{
  name:"西(北)",
  selected: false
}]);


const areacode = ref(null)
//综合切换事件
const abClick = function (selectIndex) {
  abItems.value.forEach((row, index) => {
    row.selected = (index === selectIndex);
  });
  if(selectIndex === 0){
    areacode.value = null
  }
  else if(selectIndex === 1){
    areacode.value = "01"
  }
  else if(selectIndex === 2){
    areacode.value = "02"
  }
  //切换分区刷新数据
  refreshData()
}



const state = reactive({
  hzsjb : '0%',
  pjtlsj : '0',
  compflag:'',
  video_img_a_1:'',
  video_img_a_2:'',
  video_img_b_1:'',
  video_img_b_2:'',
  video_img_c_1:'',
  video_img_c_2:'',  
  video_a_1 : "",
  video_a_2 : "",
  video_b_1 : "",
  video_b_2 : "",
  video_c_1 : "",
  video_c_2 : "",
  left1Data : {
    eventtype:0
  }
})
//事件年度对比 start
const currentYear = new Date().getFullYear();
// 计算去年和今年的年份
const lastYear = currentYear - 1;
const thisYear = currentYear;
const sjnddb_legend = ref([`${lastYear}年`, `${thisYear}年`]);
const sjnddb_x = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const sjnddb_y_1 = ref([140, 232, 101, 264, 90, 340, 250, 101, 264, 90, 340, 250])
const sjnddb_y_2 = ref([120, 282, 111, 234, 220, 340, 310, 111, 234, 220, 340, 310])
//1=加油站排队 3=逆行 6=烟雾 8=火灾(原值:20) 9=烟火
const sjnddb_navs = ref([
  {name:'加油站排队',eventtype:1,selected:false},
  {name:'疑似烟火',eventtype:0,selected:true}
  // {name:'逆行',eventtype:3,selected:false},
  // {name:'烟雾',eventtype:6,selected:true},
  // {name:'火灾',eventtype:8,selected:false},
  // {name:'烟火',eventtype:9,selected:false}
])
const sjnddbClick = function (selectIndex){
  sjnddb_navs.value.forEach((row,index)=>{
    row.selected = (index === selectIndex);
    if(index === selectIndex){
      state.left1Data.eventtype = row.eventtype
    }
  });
  //更新数据
  getLeft1Data()
}
const sjnddbRef = ref();
const sjnddbOpt = ref({
  color: ['#5AFFFA', '#F44538'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: '',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: sjnddb_legend,
    right: '3%',
    top: '6%',
    textStyle:{
      color: '#FFFFFF',
      fontSize: 12
    },
    icon:'rect',
    itemWidth: 18,
    itemHeight: 6
  },
  grid: {
    top: '35%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: sjnddb_x.value,
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: '#00EAFF' // 设置轴线颜色
        }
      },
      axisTick:{
        show: false
      },
      axisLabel: {
        interval:0,
        textStyle: {
          color: 'white',
          fontSize: 11
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: "次",
      nameTextStyle: {
        color: "#FFF",
        nameLocation: "end",
        padding:[0,0,0,-15]
      },
      axisLabel: {
        textStyle: {
          color: 'white'
        }
      },
      axisLine: { // 设置轴线样式
        lineStyle: {
          color: 'white' // 设置轴线颜色
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(127, 127, 127, 1)',
          type: 'dashed',
        }
      },
    }
  ],
  series: [
    {
      name: sjnddb_legend.value[0],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(90,255,250,0.8)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236, 0.1)'
          }
        ])
      },
      data: sjnddb_y_1.value
    },
    {
      name: sjnddb_legend.value[1],
      type: 'line',
      smooth: true,
      lineStyle: {
        width: 3
      },
      showSymbol: true,
      emphasis: {
        focus: 'series'
      },
      areaStyle: {
        opacity: 0.8,
        color: new chart.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#f46a60'
          },
          {
            offset: 1,
            color: 'rgba(244,106,96,0.1)'
          }
        ])
      },
      data: sjnddb_y_2.value
    }
  ]
});

//事件年度对比 END

//今日安全事件
const jraqsjList = ref([
  {
    clazz:'yd',
    value:0,
    label:'加油站排队'
  },
  {
    clazz:'yh',
    value:0,
    label:'疑似烟火'
  }
  // {
  //   clazz:'yw',
  //   value:0,
  //   label:'烟雾'
  // },
  // {
  //   clazz:'hz',
  //   value:0,
  //   label:'火灾'
  // },
  // {
  //   clazz:'yh',
  //   value:0,
  //   label:'烟火'
  // }
])

//危化品车辆进出记录
const whpcljcjlTable = ref([
  /*
  {area:'东(南)', carNo:'车牌号',position:'入口',time:'2023-01-01 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100']},
  {area:'东(南)', carNo:'车牌号',position:'入口',time:'2023-01-02 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'东(南)', carNo:'车牌号',position:'入口',time:'2023-01-03 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'东(南)', carNo:'车牌号',position:'入口',time:'2023-01-04 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'东(南)', carNo:'车牌号',position:'入口',time:'2023-01-05 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'西(北)', carNo:'车牌号',position:'入口',time:'2023-01-06 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'西(北)', carNo:'车牌号',position:'入口',time:'2023-01-07 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'西(北)', carNo:'车牌号',position:'入口',time:'2023-01-08 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'西(北)', carNo:'车牌号',position:'入口',time:'2023-01-09 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'西(北)', carNo:'车牌号',position:'入口',time:'2023-01-10 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
  {area:'C区', carNo:'车牌号',position:'入口',time:'2023-01-11 11:11',imgs:['https://img.zcool.cn/community/01w5a8aqd1bwnr1w4pordc3231.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100','https://img2.baidu.com/it/u=4041406647,908155545&fm=253&fmt=auto&app=138&f=JPEG?w=605&h=500']},
*/
  ])
//数据按5个拆分
function chunkArray(array, chunkSize) {
  let result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}
const whpcljcjlGroupTable = ref(chunkArray(whpcljcjlTable.value,5));
const showPhotoLayer = ref(false);
const imgItems = ref();
const viewImg = function (item) {
  imgItems.value = item.imgs;
  showPhotoLayer.value = true;
}
const closePhotoLayer = function (){
  showPhotoLayer.value = false;
}

//监测预警记录
const jcyjjlTable = ref([
  /* {express:'相机IP1相机IP1相机IP1相机IP1',eventtypename:'事件类型2',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[], picturepath:"g:/long/2.png"},
  {express:'相机IP1相机IP1相机IP1相机IP1',eventtypename:'事件类型2',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[]},
  {express:'相机IP1相机IP1相机IP1相机IP1',eventtypename:'事件类型',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[]},
  {express:'相机IP1相机IP1相机IP1相机IP1',eventtypename:'事件类型',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[]},
  {express:'相机IP1相机IP1相机IP1',eventtypename:'事件类型',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[]},
  {express:'相机IP2相机IP1相机IP1相机IP1',eventtypename:'事件类型',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[]},
  {express:'相机IP2相机IP1',eveventtypenameent:'事件类型',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[]},
  {express:'相机IP2',eventtypename:'事件类型',validdatetime:'2025-11-02 11:11',channelid:"13030370001310000004",imgs:[]}, */
]);
const jcyjjlGroupTable = ref(chunkArray(jcyjjlTable.value,5));


/* 中间车流量统计 */
const carFlowOptions = ref({
  carFlowText: "今日危化品车流量",
  carFlowNum: "0"
})

//本年度事件类型占比
const bndsjlxzbData = ref([
  { value: 735, name: '加油站排队' },
  { value: 300, name: '疑似烟火' }
])
const total = ref(0);
bndsjlxzbData.value.forEach(a=>{
  total.value = total.value +  a.value
})

const bndsjlxzbRef = ref();
const bndsjlxzbOpt = ref({
  title: {
    text: '总事件 ' + total.value,
    bottom: '0',
    left:'20%',
    textStyle:{
      color: '#FFFFFF',
      fontSize: 14
    }
  },
  legend: {
    top: '12%',
    right: 'right',
    itemGap: 15,
    itemWidth:10,
    itemHeight:10,
    formatter: function(params) {
      let cur;
      bndsjlxzbData.value.forEach(a=>{
        if (a.name === params){
          cur = a;
        }
      })
      if (!cur)
        return '{a|' + params + '}{b|'+0+'}{b|'+0+'%}'
      return total.value?('{a|' + cur.name + '}{b|'+cur.value+'}{b|'+parseInt((cur.value*100/total.value).toFixed(0))+'%}'):('{a|' + cur.name + '}{b|'+cur.value+'}{b|'+0+'%}')
    },
    textStyle: {
      color: '#FFFFFF',
      rich: {
        a: {
          fontSize: 13,
          color: '#FFF',
          padding:[0,10]
        },
        b: {
          fontSize: 13,
          color: '#FFF',
          padding:[0,10]
        },
      }
    },
  },
  series: [
    {
      type: 'pie',
      radius: ['30%', '60%'],
      center: ['30%','50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'left'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 10,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: bndsjlxzbData.value
    }
  ]
});

//安全监控点
/* 视频相关 */
const videoSource = ref("https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4")
const videoTitle = ref("视频监控")
const yjjlSource = ref([])
const showVideoLayer = ref(false);
const showYjjlLayer = ref(false);
const videoSessionId = ref(null)
const vPlayerRef = ref(null)
const closeVideo = function (){
  if(videoSessionId.value){
    ajaxRequest('post', 'ivmsCloseStream', {sessionid: videoSessionId.value})
  }
  showVideoLayer.value = false;
}

async function seeVideo(chanpubid,title){
  if(!chanpubid){
    return
  }
  const params = {
    chanpubid : chanpubid
  }
  const res = await ajaxRequest('post', 'ivmsRealPlay', params)
  if(res.data && res.data.errcode == 0){
    videoSessionId.value = res.data.SessionId
    videoSource.value = res.data.flvurl
  }
  videoTitle.value = title ? title : '视频监控'
  showVideoLayer.value = true;
}

async function playback(item, title) {
   if(!item.channelid || !item.validdatetime){
    return
  }
  const params = {
    chanpubid: item.channelid
    ,starttime:item.validdatetime.replace(" ","T")+":00"
    ,endtime:item.validdatetime.replace(" ","T")+":59"
  }

  const res = await ajaxRequest('post', 'ivmsPlayback', params)
  if(res.data && res.data.errcode == 0){
    videoSessionId.value = res.data.SessionId
    videoSource.value = res.data.flvurl
  }
  videoTitle.value = title ? title : '视频监控'
  showVideoLayer.value = true;
}

const showBroadcastLayer = ref(false);
const seeAbroadcast = function (item){
  showBroadcastLayer.value = true;
}
const closeBroadcastLayer = function (){
  showBroadcastLayer.value = false;
}


// const showYjjlWindow = function (item){
//   if(!showYjjlLayer.value){
//       showYjjlLayer.value = true
//     }
//   yjjlSource.value =
//     [
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',channelid:'123',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'},
//       {id:1,express:'A区大反垄断法',eventtypename:'烟雾',validdatetime:'2023-01-01 12:00'}
//     ]
// }

const closeYjjlLayer = function (){
  showYjjlLayer.value = false;
}

/**
 * 实时监控检测预警记录，如果有新记录，弹框提示
 * 获取今日检测预警记录（最近5分钟）
 */
 async function checkJrjcyjjlEx() {
  const params = {}
  jcyjjlTable.value=[]
  const res = await ajaxRequest('post', 'getJrjcyjjlEx', params)
  if (res.data && res.data.length > 0) {
    if(!showYjjlLayer.value){
      showYjjlLayer.value = true
    }
    yjjlSource.value = res.data
  }else{
    showYjjlLayer.value = false;
  }
}

let timer = null
// 刷新页面数据
watch([areacode],(newVal, oldVal) => {
   if (timer) clearInterval(timer)
  //  refreshData()
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
})

let sjnddbChart,bndsjlxzbChart;
onMounted(() => {
  sjnddbChart = drawLine(sjnddbRef.value, sjnddbOpt.value);
  //bndsjlxzbChart = drawLine(bndsjlxzbRef.value,bndsjlxzbOpt.value);
  initConfig()
  refreshData()
})

// 1分钟刷新
const autoRefreshData = () => {
  timer = setInterval(async () => {
    checkJrjcyjjlEx()

    getWhpcll()
    getRight3Data()//今日检测预警记录
    getLeft3Data()//今日危化品车辆进出记录
  }, 60*1000)
}

//刷新数据
const refreshData = () => {
  getWhpcll()
  getWhppjtlsj()
  getLeft1Data()//事件年度对比
  //原来右三移到左二位置
  getRight3Data()//今日检测预警记录
  getLeft3Data()//今日危化品车辆进出记录
  // 1分钟自动刷新
  autoRefreshData()
}

//刷新数据
const initConfig = () => {
  //从配置文件中加载
  fetch("config/securitySituation/comm.json")
    .then(response => response.json())
    .then(data => {
      state.compflag = data.compflag
      if(process.env.VITE_BASE_URL !='/'){
        const queryParams = new URLSearchParams(window.location); // 解析URL查询参数  
        const ip = queryParams.get('hostname'); // 假设IP地址是通过查询参数传递的  
        // 滦州服务区 13.81.48.242
        // 山海关服务区 13.81.51.242
        // 丰润停车区 13.81.47.242
        // 玉田服务区  13.81.46.242  
        // 迁安停车区  13.81.49.242
        // 卢龙服务区  13.81.50.242
        // 北戴河服务区 13.81.8.242
        if("13.81.48.242" === ip || "fwqzt.hbgs.cloud" === ip){
          state.compflag = "luanzhou"
        }
        else if("13.81.51.242" === ip){
          state.compflag = "shanhaiguan"
        }
        else if("13.81.47.242" === ip){
          state.compflag = "fengrun"
        }
        else if("13.81.46.242" === ip){
          state.compflag = "yutian"
        }
        else if("13.81.49.242" === ip){
          state.compflag = "qianan"
        }
        else if("13.81.50.242" === ip){
          state.compflag = "lulong"
        }
        else if("13.81.8.242" === ip){
          state.compflag = "beidaihe"
        }
        else if("13.81.7.242" === ip){
          state.compflag = "xianghe"
        }
      }
      //设置各服务区图片、相机
      state.video_img_a_1 = process.env.VITE_BASE_URL + "config/securitySituation/"+data['video_img_a_1_'+state.compflag]
      state.video_img_a_2 = process.env.VITE_BASE_URL + "config/securitySituation/"+data['video_img_a_2_'+state.compflag]
      state.video_img_b_1 = process.env.VITE_BASE_URL + "config/securitySituation/"+data['video_img_b_1_'+state.compflag]
      state.video_img_b_2 = process.env.VITE_BASE_URL + "config/securitySituation/"+data['video_img_b_2_'+state.compflag]
      state.video_img_c_1 = process.env.VITE_BASE_URL + "config/securitySituation/"+data['video_img_c_1_'+state.compflag]
      state.video_img_c_2 = process.env.VITE_BASE_URL + "config/securitySituation/"+data['video_img_c_2_'+state.compflag]
      state.video_a_1 = data['video_a_1_'+state.compflag]
      state.video_a_2 = data['video_a_2_'+state.compflag]
      state.video_b_1 = data['video_b_1_'+state.compflag]
      state.video_b_2 = data['video_b_2_'+state.compflag]
      state.video_c_1 = data['video_c_1_'+state.compflag]
      state.video_c_2 = data['video_c_2_'+state.compflag]

      if(data.abItems){
        abItems.value = data.abItems
      }
    });
}

/**
 * 获取危化品车辆 中间车流量统计
 */
 async function getWhpcll() {
  const params = {
    areacode: areacode.value
   }
  const res = await ajaxRequest('post', 'getWhpcll', params)
  if (res.data && res.data.whp) {
    carFlowOptions.value.carFlowNum = res.data.whp+""
  } else {
    carFlowOptions.value.carFlowNum = "0"
  }
}
/**
 * 获取火灾事件比
 */
 async function getHzsjb() {
  const params = {
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getHzsjb', params)
  if (res.data && res.data.total) {
    state.hzsjb = (res.data.total_hz/res.data.total*100).toFixed(2)+"%"
  }
}
/**
 * 获取危化品车平均停留时间
 */
 async function getWhppjtlsj() {
  const params = {
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getWhppjtlsj', params)
  if (res.data && res.data.pjtlsj) {
    state.pjtlsj = res.data.pjtlsj
  }
}

/**
 * 获取事件年度对比
 */
async function getLeft1Data() {
  const params = {
    eventtype:state.left1Data.eventtype,
    areacode: areacode.value
  }
  sjnddb_y_1.value=[]
  sjnddb_y_2.value=[]
  const res = await ajaxRequest('post', 'getSjnddb', params)
  if (res.data) {
    if(res.data.thisyear){
      res.data.thisyear.forEach(item=>{
        sjnddb_y_2.value[parseInt(item.month-1)] = item.cnt
      })
    }
    if(res.data.lastyear){
      res.data.lastyear.forEach(item=>{
        sjnddb_y_1.value[parseInt(item.month-1)] = item.cnt
      })
    }
  }
  sjnddbOpt.value.series[0].data = sjnddb_y_1.value
  sjnddbOpt.value.series[1].data = sjnddb_y_2.value
  sjnddbChart.setOption(sjnddbOpt.value)
}

/**
 * 获取今日安全事件
 */
async function getLeft2Data() {
  const params = {
    areacode: areacode.value
  }
  jraqsjList.value[0].value = 0
  jraqsjList.value[1].value = 0
  const res = await ajaxRequest('post', 'getJraqsj', params)
  if (res.data) {
    //1=加油站排队 3=逆行 6=烟雾 8=火灾(原值:20) 9=烟火
    res.data.forEach(item=>{
      //1=加油站排队
      if(item.eventtype === 1){
        jraqsjList.value[0].value = item.cnt
      }
      else if(item.eventtype === 6 || item.eventtype === 8 || item.eventtype === 9){
        jraqsjList.value[1].value =  parseInt(jraqsjList.value[1].value) + parseInt(item.cnt)
      }

      /*
      //6=烟雾
      else if(item.eventtype === 6){
        jraqsjList.value[2].value = item.cnt
      }
      //8=火灾(原值:20)
      else if(item.eventtype === 8){
        jraqsjList.value[3].value = item.cnt
      }
      //9=烟火
      else if(item.eventtype === 9){
        jraqsjList.value[4].value = item.cnt
      }
      */
    })
  }
}

/**
 * 获取今日危化品车辆进出记录
 */
async function getLeft3Data() {
  const params = {
    areacode: areacode.value
  }
  whpcljcjlTable.value=[]
  const res = await ajaxRequest('post', 'getJrwhpcljcjl', params)
  if (res.data && res.data.length > 0) {
    res.data.forEach((item,index)=>{
      let pictureUrl1 = encodeURI("../staVehiclePass/getPicture.do?compId="+item.compid+"&path="+item.fullpicturepath);
      let pictureUrl2 = encodeURI("../staVehiclePass/getPicture.do?compId="+item.compid+"&path="+item.platepicturepath);
      let row = {
        area : item.areaname ?? "",
        carNo : item.platenumber ?? "",
        position : item.position == 0 ? "入口":"出口",
        time : item.passtime ?? "",
        imgs:[pictureUrl1,pictureUrl2]
      }
      whpcljcjlTable.value.push(row)
    })
    whpcljcjlGroupTable.value=chunkArray(whpcljcjlTable.value,5)
  }
}
/**
 * 获取本年度事件类型占比
 */
async function getRight1Data() {
  const params = {
    areacode: areacode.value
  }
  //用填充方式。显示0
  bndsjlxzbData.value[0].value = 0
  bndsjlxzbData.value[1].value = 0
 
  //事件总数
  total.value = 0
  const res = await ajaxRequest('post', 'getNdsjlxzb', params)
  if (res.data && res.data.length > 0) {    
    res.data.forEach((item,index)=>{
      total.value += parseInt(item.cnt)
      // bndsjlxzbData.value.push({value:item.cnt,name:item.eventtypename})
      //用填充方式。显示0
      if(1 === item.eventtype) {
        bndsjlxzbData.value[0].value = item.cnt
      }
      //6=烟雾 8=火灾(原值:20) 9=烟火
      else if(6 === item.eventtype || 8 === item.eventtype  || 9 === item.eventtype ) {        
        bndsjlxzbData.value[1].value = parseInt(bndsjlxzbData.value[1].value) + parseInt(item.cnt)
      }
    })
  }
  bndsjlxzbOpt.value.title.text='总事件 ' + total.value
  bndsjlxzbOpt.value.series[0].data=bndsjlxzbData.value
  bndsjlxzbChart.setOption(bndsjlxzbOpt.value)
}

/**
 * 获取今日检测预警记录
 */
async function getRight3Data() {
  const params = {
    areacode: areacode.value
  }
  jcyjjlTable.value=[]
  const res = await ajaxRequest('post', 'getJrjcyjjl', params)
  if (res.data && res.data.length > 0) {
    res.data.forEach((item,index)=>{
      if(item.picturepath){
        let pictureUrl = encodeURI("../staVehiclePass/getPicture.do?compId="+item.compid+"&path="+item.picturepath);
        item["imgs"] = [pictureUrl]
      }
    })
    jcyjjlTable.value = res.data
  }
  jcyjjlGroupTable.value=chunkArray(jcyjjlTable.value,5)
}
</script>
<style scoped>
.svg-content{
  display: flex;
  justify-content: center;
  padding: 2vh;
  img{
    height: 100%;
  }
}

@media screen and (max-width: 1500px) {
  .svg-content{
    img{
      width: 100%;
    }
  }
}

.yz-box-item-text{
  font-size: 1.6vh;
  line-height: 25px;
}

.yz-common-title-navs {
  display: flex;
  position: absolute;
  font-size: 1.2vh;
  right: 1.4vh;
  top: 4.5vh;
  z-index: 1000;
  .yz-common-title-nav {
    color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
    font-style: normal;
    border-right: 1px solid #ffffff;

  }
  .yz-common-title-nav:last-of-type {
    border-right: none;
  }
  .yz-common-title-nav.selected {
    span{
      border-bottom: 2px solid #3DBDC8;
    }
  }
}


.toilet-items{
  padding: 5%;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .toilet-item{
    width: 33%;
    display: flex;
    justify-content: center;
    padding: 1vh;
    .toilet-item-main{
      width: 100%;
      position: relative;
      background: rgba(0, 234, 255, 0.1);
      border: 2px solid rgba(0, 234, 255, 0.2);
      box-shadow: inset 0 0 14px 6px rgba(0, 234, 255, 0.1);
      align-content: center;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      .toilet-img{
        height: 100%;
        display: flex;
        align-content: center;
        flex-wrap: wrap;
      }
      .yd{
        position: relative;
        background: url("../assets/img/security/拥堵.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .nx{
        position: relative;
        background: url("../assets/img/security/逆行.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .yw{
        position: relative;
        background: url("../assets/img/security/烟雾.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .hz{
        position: relative;
        background: url("../assets/img/security/火灾.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .yh{
        position: relative;
        background: url("../assets/img/security/烟火.png") no-repeat;
        background-size: 80%;
        width: 3vh;
        height: 3vh;
      }
      .toilet-icon-text{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;;
        line-height: 2vh;
        .toilet-icon-text-value{
          font-size: 1.4vh;
          color: #35CB9C;
        }
        .toilet-icon-text-zh{
          font-size: 1.2vh;
        }
      }
    }
  }
}
.yz-select-server{
  height: 4.5vh;
}

.filler-table{
  width: 100%;
  text-align: center;
  border-collapse: collapse;
  thead tr{
    margin-top: 3vh;
    line-height: 40px;
    height: 40px;
  }
  thead tr th{
    font-size: 80%;
  }
  td,th{
    width: 25%;
    text-align: center;
  }
  tbody td{
    padding-bottom: 0.5vh;
    font-size: 80%;
    cursor: pointer;
    padding-top: 0.8vh;
  }
  tbody tr:hover{
    background: #602121;
  }
  .time{
    width: 130px;
  }
  .tr-select{
    background: #602121;
  }
}
.filler-table2{
  td,th{
    width: 25%;
    text-align: center;
  }
}

.pic{
  background: url("../assets/img/public/标题icon.png") no-repeat;
  width: 1.6vh;
  height: 1.6vh;
  background-size: cover;
}
.camera{
  background: url("../assets/img/security/相机.png") no-repeat;
  width: 1.6vh;
  height: 1.6vh;
  background-size: cover;
}
.broadcast{
  background: url("../assets/img/security/广播.png") no-repeat;
  width: 1.6vh;
  height: 1.6vh;
  background-size: cover;
}
.tc{
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
}

</style>
